@import '~@/scss/GlobalVariables';

$mobile-width: 530px;

//***************************************************
// DEVELOPMENT USE ONLY "Modal open button"
//***************************************************
.div-only-button {
  position: fixed;
  bottom: 15px;
  left: 15px;
  background-color: red;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 13px;
  z-index: 9999999;
  user-select: none;
}

//***************************************************
// tx-speed
//***************************************************
.tx-speed {
  .radio-buttons {
    ul {
      li {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        @media all and (max-width: $mobile-width) {
          display: block;
        }

        div {
          position: relative;
          display: flex;
          align-items: center;

          input {
            margin-right: 10px;
          }

          input[type='number'] {
            padding: 12px;
            position: absolute;
            left: 25px;
            top: -12px;
            border: 0;
            background-color: $light-grey-1;
            display: block;
            width: 150px;
            @media all and (max-width: $mobile-width) {
              top: -1px;
              padding: 4px;
            }
          }

          .gwei {
            margin-left: 170px;
            @media all and (max-width: $mobile-width) {
              margin-left: 160px;
            }
          }
        }

        p {
          margin-left: auto;
          @media all and (max-width: $mobile-width) {
            margin-top: 4px;
            margin-left: 24px;
            font-size: 13px;
          }
        }
      }

      .selected * {
        font-weight: 600;
      }
    }
  }

  .button-block {
    margin-top: 45px;
    text-align: center;
  }
}

//***************************************************
// Import Configurations
//***************************************************
.import-config {
  .import-button-block {
    margin-top: 30px;
    display: grid;
    align-items: center;
    grid-gap: 10px;
    grid-template-columns: 1fr 183px;

    input[type='file'] {
      display: none !important;
    }

    .filename {
      background-color: $light-grey-1;
      height: 100%;
    }

    @media all and (max-width: $mobile-width) {
      margin-top: 10px;
      display: block;
      width: 100%;
      text-align: center;

      .filename {
        margin-bottom: 10px;
      }
      .upload-file-button {
        margin-top: 10px;
      }
    }
  }

  .button-block {
    text-align: center;
    margin-top: 10px;
    @media all and (max-width: $mobile-width) {
      margin-top: 10px;
    }
  }
}

//***************************************************
// Export Configurations
//***************************************************
.export-config {
  .button-block {
    text-align: center;
    margin-top: 40px;
  }
}

//***************************************************
// Address Book
//***************************************************
.address-book {
  .table-container {
    margin-top: 10px;
    max-height: 300px;
    overflow: auto;

    .contact-container {
      background-color: $light-grey-2;
      border-radius: 4px;
      display: table;
      overflow-y: auto;
      table-layout: fixed;
      width: 100%;

      .header {
        th {
          text-transform: uppercase;
        }
      }

      thead tr th {
        background-color: $light-blue-11;
        position: sticky;
        top: 0;
      }

      tbody {
        tr {
          border-bottom: 1px solid $light-blue-11;
        }
      }

      th {
        color: #476081;
        font-weight: 400;
        font-size: 13px;
      }

      th,
      td {
        padding: 10px;
      }

      .blockie-image {
        margin-right: 5px;
        min-width: 25px;
      }

      .numbered {
        color: $dark-grey-7;
      }

      .addr-container {
        align-items: center;
        display: flex;
      }

      .addr-nickname {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .contact-addr {
        color: $light-blue-8;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }

      .edit-txt {
        color: $mew-green;
        cursor: pointer;
        font-weight: 500;
      }
    }
  }
  .addr-btn-container {
    display: flex;

    button {
      background-color: $white;
      border-radius: 4px;
      border: 1px solid $mew-green;
      color: $mew-green;
      height: 62px;
      margin-top: 10px;
      width: 100%;
    }
    .disabled {
      background-color: $dark-grey-11;
      border: none;
      color: $white;
      pointer-events: none;
    }
  }

  .numbered-col {
    width: 20px;
  }
}
